<template>
    <div>
        <h1>{{title}}</h1>
        <div class="panel panel-success">
            <div class="panel-body">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="分类名称">
                        <el-input v-model="form.name" placholder="请输入分类的名称"></el-input>
                    </el-form-item>
                    <div class="row">
                        <div class="col-md-6">
                            <el-form-item label="分类推荐度">
                                <el-input-number v-model="form.stock" :min="0"></el-input-number>
                            </el-form-item>
                        </div>
                        <div class="col-md-6">
                            <el-form-item label="是否开放">
                                <el-switch
                                        v-model="form.grounding"
                                        on-text="开放"
                                        off-text="关闭">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </div>
                    <el-form-item label="分类介绍">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.description"
                                  placholder="请输入分类的介绍"></el-input>
                    </el-form-item>
                </el-form>
                <footer class="text-center">
                    <el-button type="primary">{{confirmBtnTip}}</el-button>
                    <el-button type="danger">{{errorBtnTip}}</el-button>
                </footer>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        id: 0,
        title: '新增分类',
        confirmBtnTip: '确定修改',
        errorBtnTip: '取消修改',
        form: {}
      }
    },
    mounted () {
      this.id = this.$route.params.id
      this.confirmBtnTip = this.id !== 0 ? '确定修改' : '确定新增'
      this.errorBtnTip = this.id !== 0 ? '取消修改' : '取消新增'
      this.title = this.id === 0 ? '新增分类' : '编辑分类'
    }
  }
</script>

<style>

</style>
